<template>
  <div class="chat_auxiliary_info">
    <track-label v-if="userBehaviorVideoId" @getVideos="getVideos"></track-label>
    <div v-if="ubaInfoList.pages" id="timeScroll"
          class="time_line_warp" :class="{'time_line_little': !ubaInfoList.pages || ubaInfoList.pages.length < 6}"
          v-on:scroll="timeScroll($event)">
      <ul>
        <webchat-time-line :ubaInfoListPages="ubaInfoList.pages"></webchat-time-line>
      </ul>
    </div>
  </div>
</template>

<script>
import trackLabel from '../../trackVideo/trackLabel'
import trackVideo from '../../trackVideo/trackVideo'
import WebchatTimeLine from '../../../../ui-modules/timeLine/webChatTimeLine.vue'
export default {
  name: 'TrackInfo',
  data: function () {
    return {
      sessionId: ''
    }
  },
  props: {
    id: String,
    ubaSessionId: String,
    tabType: String,
    userBehaviorVideoId: String,
    initUbaInfoList: Object
  },
  watch: {
    id (cur, old) {
      this.sessionId = ''
    }
  },
  computed: {
    ubaInfoList () {
      if (this.sessionId) {
        return this.$store.state.webchat.ubaInfoList[this.sessionId] || {}
      } else {
        return this.initUbaInfoList || {}
      }
    }
  },
  methods: {
    timeScroll (event) { // 滚动加载更多浏览轨迹
      let nScrollHight = 0
      let nScrollTop = 0
      let nDivHight = event.target.offsetHeight
      nScrollHight = event.target.scrollHeight
      nScrollTop = event.target.scrollTop
      if (nScrollTop + nDivHight + 2 >= nScrollHight) {
        this.$store.dispatch('loadUbaInfo', {_id: this.id, ubaSessionId: this.ubaSessionId, tabType: this.tabType}).then((sessionId) => {
          if (sessionId) {
            this.sessionId = sessionId
          }
        })
      }
    },
    getVideos (state) {
      this.$emit('getVideos', state)
    }
  },
  components: {
    trackLabel,
    trackVideo,
    WebchatTimeLine
  },
  beforeMount () {
//    this.ubaInfoList = this.initUbaInfoList || {}
  }
}
</script>

<style lang="stylus" scoped>
  .chat_auxiliary_info
    line-height 18px
    .chat_auxiliary_from
      float right
  .time_line_warp
    height calc(100vh - 562px)
    max-height: 250px
    overflow-y auto
    padding-bottom 10px
  .time_line_little
    height 100%
    max-height: 250px
</style>